<template>
  <div class="header">
    <a class="logo" href>
      <img src="~img/common/logo_229_31.png" alt />
    </a>
    <ul class="title">
      <li v-for="(e,i) in title" :key="i" @click="fn(i)">
        <a :href="e.url" :class="{active:isCurr == i}">{{e.name}}</a>
      </li>

    </ul>
    <div class="login">
      <a href="javascript:;">登录</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data(){
    return{
      title:[{name:"首页",url:'javascript:;'},{name:"岗位详情",url:'javascript:;'},{name:"通知动态",url:'javascript:;'},{name:"了解腾讯",url:'javascript:;'},{name:"视频干货",url:'javascript:;'}],
      isCurr:0
    }
  },
  methods:{
    fn(i){
      this.isCurr = i
    }
  }
};
</script>

<style scoped>
.header{position: absolute;top:50px;left:160px;right:160px;height:32px}




.header .logo,header .title{float:left}
.header .login{float: right;}
.header .logo{width: 230px;height: 3rem;margin-right:40px}
/* .header .title{overflow: hidden;} */
.header .title li{float:left;margin:0 2.2rem}
.header .title li > a{line-height: 32px;color: #fff;font-size: 1.6rem;opacity: 0.8;}
.header .title li > .active {opacity: 1;font-weight: bold;padding-bottom:8px;border-bottom: 2px solid white;} 
.header .login{height: 100%;line-height: 32px;}
.header .login a{color: #fff;font-size: 1.6rem;opacity: 0.8;}
.header .login a:hover{color: #fff;font-size: 1.6rem;opacity: 1;}

@media screen and (max-width: 1279px) {
  .header .logo{
      width: 180px;
  }
}
</style>